<template>
    <div style="padding: 0px 50px; 0px 0px;margin: 0;">
        <p class='title'>
             推荐歌单
        </p>
             <div class="allMusic">
                 <ul class="clearfix message" style='padding-left: 0; margin: 0;'>
                     <li v-for="item in leftList">
                         <div class="grid-content bg-purple">
                            <div class="icon">
                                <img  :title="item.copywriter" v-lazy='item.picUrl'>
                                <div class="bottom">
                                    <a href="javascript:void(0)" class="icon-play"></a>
                                    <span class="icon-headset"></span>
                                    <span class="nb">{{item['playCount']}}</span>
                                </div>
                            </div>
                            <!-- <a href="javascript:void(0)" :title="item.description" class="msk"></a>-->
                            <p>{{item['name']}}</p>
                        </div>
                     </li>
                 </ul>
             </div>
             <p class='title'>推荐新音乐</p>
          <div class='newMusic'>
            <ul >
                  <li v-for="item in newMusic">
                      <i>
                            <div class='display'>
                                <a class='m-listen' title="播放" href="javascript:void(0)" @click='play(item)'></a>
                          </div>
                          <img v-lazy="item.song.album.picUrl" alt="">
                      </i>
                      <aside>
                          <span class="title-new">{{item.song.album.name}}</span><span class="subtitle" v-if="item.song.album.alias[0]!=undefined">({{item.song.album.alias[0]}})</span>
                             <p class='author'>{{item.song.album.artists[0]['name']}}</p>
                      </aside>
                  </li>

              </ul>
          </div>
    </div>
</template>
<script>
import app from '../../../src/App.vue'
   export default{
       data(){
            return{
                leftList:{},
                newMusic:{},
                sleect:'',
                palyid:0,
            }
       },
       mounted(){
               this.getLeft();
               this.getNewMusic();
       },
       methods:{  
             getLeft(){
               let target = this;
               target.fetch({
                   url:'/personalized',  //推荐歌单
                   method:'GET',
                   params:{
                       limit:6,
                       offset:0
                   }
               }).then(function (response) { 
                  target.leftList = response.data.result; 
                  console.log(target.leftList,4,45);
               });
             },
             getNewMusic(){
                 let target = this;
               target.fetch({
                   url:'/personalized/newsong',  //推荐歌单
                   method:'GET',
                   params:{
                       limit:40,
                       offset:0
                   }
               }).then(function (response) { 
                  target.newMusic = response.data.result; 
                 
               });  
             },
             play(item){
                 this.palyid = item.id;
                 this.$store.ztstore.music_id =this.palyid;
             }
       }
   }
</script>

<style scoped>
  ul li{
      list-style: none;
      float: left;
       position: relative;
      cursor: pointer;
  }
  .message li{
      width: 140px;
      height: 204px;
      padding-left: 42px;
    overflow: hidden;
  }
  .message li > div{
      position: relative;
      height: 204px;
  }
  .message li > div img{
      width: 100%;
      height: 100%;
  }
  .m-listen{
          position: absolute;
        left: 10px;
        bottom:10px;
        width: 16px;
        height: 17px;
        background-position: 0 0;
      background:url('/static/iconall.png') no-repeat;
  }
  .title{
     border-bottom: 1px solid #850202ab;
     padding: 10px 0;
  }
  .titleUl{
       margin: 0;
  }
  .checked::after{
    content: '';
    width: 0;
    height: 0;
    left: 40px;
    bottom: -10px;
    border-width: 0 12px 12px;
    border-style: solid;
    border-color: transparent transparent #850202;
    position: absolute;
  }
  .newMusic li{
      width: 50%;
     margin-bottom: 10px;
    position: relative;
  }
  .newMusic i{
       float: left;
    width: 40px;
    height: 40px;
    border: 2px solid #ffffff8a;
  }
  .display{
    display: none;
     background-color: #dbd2d26b;
    height: 40px;
    position: absolute;
    left: 0;
    width: 40px;
  }
    .newMusic i:hover .display{
              display: block;
    }
   .newMusic i img{
       width: 100%;
       height: 100%;
   }
   .title-new{
           margin-left: 10px;
               font-size: 14px;
   }
   .subtitle{
         color:#ccc;
         margin-left: 10px;
           font-size: 12px;
   }
   .author{
        margin: 0px 20px;
        padding: 0;
        font-size: 12px;
            margin: 2px 60px;
        color: #8f8f8f;
   }

</style>